import React, { Component } from 'react';
import { inject, observer } from 'mobx-react';
import './App.css';
import appleImg from './assets/apple.png'

@inject('appleStore')
@observer
class App extends Component {

  onAddAppleList () {
    const { addAppleList } = this.props.appleStore
    addAppleList()
  }

  render () {
    const { getAppleList, num, weight, eat, eatWeight, eatAppleList } = this.props.appleStore
    return (
      <div className="container">
        <div className="header">苹果篮子</div>
        <div className="number">
          <div className="current">
            <span className="current-title">当前</span>
            <div>{num}个苹果，{weight}克</div>
          </div>
          <div className="done">
            <span className="current-title">已吃掉</span>
            <div>{eat}个苹果，{eatWeight}克</div>
          </div>
        </div>
        <div className="list">
          {
            getAppleList.map((item, index) => {
              return (
                <div className="list-item" key={item.id} onClick={() => { eatAppleList(index) }}>
                  <div className="list-info">
                    <img className="img" src={appleImg} alt="apple" />
                    <div>
                      <div className="info-title">{item.name} + {index + 1}号</div>
                      <div>{item.weight}克</div>
                    </div>
                  </div>
                  <button className="btn">吃掉</button>
                </div>
              )
            })
          }
        </div>
        <div className="action">
          <button className="get-apple" onClick={this.onAddAppleList.bind(this)}>摘苹果</button>
        </div>
      </div>
    )
  }
}

export default App;
